<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-to-r from-green-600 to-green-800 shadow-lg">
    <div class="container-fluid">
        <a class="navbar-brand font-bold text-2xl hover:text-green-200 transition duration-300" href="#">
            <i class="fas fa-landmark me-2"></i>避暑山庄智能助手与知识图谱
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="#" onclick="switchContent('chat')">
                        <i class="fas fa-comments me-2"></i>智能助手
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="#" onclick="switchContent('graph')">
                        <i class="fas fa-project-diagram me-2"></i>知识图谱
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="#" onclick="switchContent('nodeData')">
                        <i class="fas fa-database me-2"></i>节点数据
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="#" onclick="switchContent('message')">
                        <i class="fas fa-comment-dots me-2"></i>留言板
                    </a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="#" onclick="event.preventDefault(); switchContent('profile')">
                        <i class="fas fa-user me-2"></i>我的信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link hover:bg-green-700 rounded-lg px-4 py-2 transition duration-300" href="{{ url_for('auth.logout') }}">
                        <i class="fas fa-sign-out-alt me-2"></i>退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
.navbar {
    background: linear-gradient(to right, #198754, #146c43) !important;
}

.nav-link {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand:hover {
    color: #e2e8f0 !important;
}
</style>

<!-- <form class="d-flex">
    <input class="form-control me-2" id="searchInput" type="search" placeholder="搜索文物" aria-label="Search">
    <button class="btn btn-outline-success" type="button" onclick="search()">搜索</button>
</form> -->

<script>
// 临时调试代码 - 点击事件监听
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', function(e) {
        const section = this.getAttribute('onclick')?.match(/switchContent\('(.*?)'\)/)?.[1];
        console.log('尝试切换到:', section);
    });
});
</script>